<template>
  <view class="container">
    <map id="map" class="map" :longitude="postion.longitude" :latitude="postion.latitude" scale="14" show-location="true" :markers="marker" bindmarkertap="makertap" @click="doto"></map>
    <view class="del" @click="delDot"><u-icon name="trash" color="#ccc"/></view>

  </view>
</template>
<script>
import { bMapTransQQMap, qqMapTransBMap } from '@/utils/baiduMapTotencentMap.js'
export default {
  props: {
    modelValue: {
      type: Array,
      default: undefined
    },
    postion: {
      type: Object,
      default: () => ({ lng: null, lat: null })
    },
    latitude: {
      type: Number,
      default: 39.920
    },
    longitude: {
      type: Number,
      default: 116.405
    },
    iconPath: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      lines: [{
        points: [{ latitude: 39.915, longitude: 116.404 }, { latitude: 39.5215, longitude: 116.404 }],
        color: '#31c27c',
        width: 10,
        arrowLine: true,
        borderWidth: 2 // 线的边框宽度，还有很多参数，请看文档
      }],
      marker: [
        {
          id: 0,
          iconPath: null,
          latitude: null,
          longitude: null,
          width: 40,
          height: 40
          // label: {
          //   content: '下城',
          //   color: '#fff',
          //   fontSize: 12,
          //   anchorX: -(0.5 * (3 * 24)) / 2,
          //   textAlign: 'center'
          // }
        }]

    }
  },

  mounted() {
    const postion = bMapTransQQMap(this.postion.longitude, this.postion.latitude)
    this.marker[0].iconPath = this.iconPath
    this.marker[0].latitude = postion[1]
    this.marker[0].longitude = postion[0]
    this.lines.points = this.line
  },
  methods: {

    delDot() {
      this.marker[0].latitude = null
      this.marker[0].longitude = null
      this.$emit('update:modelValue', [])
    },
    doto(arg) {
      this.marker[0].latitude = arg.target.latitude
      this.marker[0].longitude = arg.target.longitude
      this.$emit('update:modelValue', qqMapTransBMap(arg.target.longitude, arg.target.latitude))
    }

  }

}
</script>
<style scoped>
.container{
  position: relative;
}
.del{
top: 50rpx;
right: 20rpx;
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rpx;
  background-color: #1762f2;
  box-sizing: border-box;
  font-size: 30rpx;
  z-index: 999;
}
.map {
    height: 500rpx;
    width:750rpx;
}

</style>